<template>
<div>
  <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
    <x-header :left-options="{showBack: false}" class="my-header" title="验证支付" ></x-header>
    <box class="buttons">
      <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="checkPay()">付款成功</x-button>
      <x-button plain type="primary" @click.native="turnBack()">继续付款</x-button>
    </box>
  </view-box>
  <toast v-model="isSuccess" type="text" :time="1500" is-show-mask text="未成功付款" position="bottom"></toast>
</div>
</template>

<script>
  import { Toast,XButton, Box,XHeader,ViewBox} from 'vux'
    export default {
      components:{ Toast,XButton, Box,XHeader,ViewBox},
      data(){
        return{
          isSuccess:false
        }
      },
      mounted(){
        this.oid=this.$route.query.oid
      },
      methods:{
        turnBack(){
          this.Ajax('get','/Order/Order/paystatus/oid/'+this.oid,{},(res)=>{
            console.log(res)
            if(res.body.body.isPayInRemote!==1){
              this.$router.go(-1)
            }else{
                this.$router.push('/order_details/success')
            }
          })
        },
        checkPay(){
            this.Ajax('get','/Order/Order/paystatus/oid/'+this.oid,{},(res)=>{
                console.log(res)
              if(res.body.body.isPayInLocal!==1){
                this.isSuccess=true
              }else{
                  this.$router.push('/order_details/success')
              }
            })
        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .buttons{
    width: 80%;
    margin: 0 auto;
    margin-top: 100px;
  }
</style>
